<!DOCTYPE html>
<html class="signin no-js" lang="${lang!}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="description" content="${app_name!}">
    <title>${app_name!}</title>
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/stepy/jquery.stepy.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap-colorpalette/css/bootstrap-colorpalette.css">

    <link rel="stylesheet" href="${base!}/assets/platform/styles/font-awesome.css">
    <link rel="stylesheet" href="${base!}/assets/platform/styles/themify-icons.css">
    <link rel="stylesheet" href="${base!}/assets/platform/styles/animate.css">
    <link rel="stylesheet" href="${base!}/assets/platform/styles/skins/palette.css">
    <link rel="stylesheet" href="${base!}/assets/platform/styles/main.css">
    <link rel="stylesheet" href="${base!}/assets/platform/styles/panel.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/jstree/themes/default/style.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/treetable/jquery.treetable.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/datatables/css/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/chosen/chosen.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap-tokenfield/css/tokenfield-typeahead.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap-tokenfield/css/bootstrap-tokenfield.css">
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/bootstrap-star-rating/css/star-rating.min.css" >
    <link rel="stylesheet" href="${base!}/assets/platform/vendor/select2/css/select2.min.css">

    <!--[if lt IE 9]>
    <script src="${base!}/assets/platform/scripts/html5shiv.js"></script>
    <script src="${base!}/assets/platform/scripts/respond.min.js"></script>
    <script src="${base!}/assets/platform/scripts/json.js"></script>
    <![endif]-->
    <!--# if(@shiro.getPrincipalProperty('loginTheme')!=null){ #-->
    <link rel="stylesheet" href="${base!}/assets/platform/styles/skins/${@shiro.getPrincipalProperty('loginTheme')}" id="skin">
    <!--# }else{ #-->
    <link rel="stylesheet" href="${base!}/assets/platform/styles/skins/palette.css" id="skin">
    <!--# } #-->
    <script src="${base!}/assets/platform/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        var base = '${base!}';
    </script>
</head>
<body>
<div class="gallery-loader" style="background-color:transparent;">
    <div class="loader"></div>
</div>

<div class="playground hidden-xs">
    <div class="options">
        <div class="pg-close ti-close"></div>
        <div class="options-container color-options">
            <h5>${msg['sys.home.theme']}</h5>
            <a onclick="sublime.changeTheme('palette.css')" href="${base!}/assets/platform/styles/skins/palette.css"
               class="css_orange cs_color cs_1 <!--# if(@shiro.getPrincipalProperty('loginTheme')==null || 'palette.css' == @shiro.getPrincipalProperty('loginTheme')){ #-->active<!--# } #-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.2.css')" href="${base!}/assets/platform/styles/skins/palette.2.css"
               class="css_orange cs_color cs_2 <!--# if('palette.2.css' == @shiro.getPrincipalProperty('loginTheme')){ #-->active<!--# } #-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.3.css')" href="${base!}/assets/platform/styles/skins/palette.3.css"
               class="css_orange cs_color cs_3 <!--# if('palette.3.css' == @shiro.getPrincipalProperty('loginTheme')){ #-->active<!--# } #-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.5.css')" href="${base!}/assets/platform/styles/skins/palette.5.css"
               class="css_orange cs_color cs_5 <!--# if('palette.5.css' == @shiro.getPrincipalProperty('loginTheme')){ #-->active<!--# } #-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.6.css')" href="${base!}/assets/platform/styles/skins/palette.6.css"
               class="css_orange cs_color cs_6 <!--# if('palette.6.css' == @shiro.getPrincipalProperty('loginTheme')){ #-->active<!--# } #-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
            <a onclick="sublime.changeTheme('palette.7.css')" href="${base!}/assets/platform/styles/skins/palette.7.css"
               class="css_orange cs_color cs_7 <!--# if('palette.7.css' == @shiro.getPrincipalProperty('loginTheme')){ #-->active<!--# } #-->">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </a>
        </div>
        <div class="options-container">
            <h5>${msg['sys.home.layout']}</h5>
            <a class="pg-val toggle-sidebar toggle-active <!--# if(@shiro.getPrincipalProperty('loginSidebar')){ #-->active<!--# } #-->"
               href="javascript:;">
                <img src="${base!}/assets/platform/images/panel/small.png" alt="">
            </a>
            <a class="pg-val toggle-scroll toggle-active <!--# if(@shiro.getPrincipalProperty('loginScroll')){ #-->active<!--# } #-->"
               href="javascript:;">
                <img src="${base!}/assets/platform/images/panel/scroll.png" alt="">
            </a>
            <a class="pg-val toggle-boxed toggle-active <!--# if(@shiro.getPrincipalProperty('loginBoxed')){ #-->active<!--# } #-->"
               href="javascript:;">
                <img src="${base!}/assets/platform/images/panel/boxed.png" alt="">
            </a>
        </div>
        <small class="pg-footer"><i class="ti-info-alt mr5"></i>${msg['sys.home.panel']}</small>
    </div>
</div>
<div
        class="app <!--# if(@shiro.getPrincipalProperty('loginSidebar')){ #--> small-menu <!--# } #--> <!--# if(@shiro.getPrincipalProperty('loginScroll')){ #--> fixed-scroll <!--# } #--> <!--# if(@shiro.getPrincipalProperty('loginBoxed')){ #--> boxed <!--# } #-->">
    <header class="header header-fixed navbar">
        <div class="brand">

            <a href="javascript:;" class="ti-menu off-left visible-xs" data-toggle="offscreen" data-move="ltr"></a>


            <a href="${base!}/platform/home" data-pjax class="navbar-brand">
                <img src="${base!}/assets/platform/images/logo.png" alt=""
                     class="o_img <!--# if(!@shiro.getPrincipalProperty('loginSidebar')){ #-->o_hide<!--# } #-->">
                <span class="heading-font o_img <!--# if(@shiro.getPrincipalProperty('loginSidebar')){ #-->o_hide<!--# } #-->">
		            <img src="${base!}/assets/platform/images/logoa.png">
                </span>
            </a>

        </div>
        <ul class="nav navbar-nav navbar-left">
            <li class="hidden-xs">

                <a href="javascript:;" class="toggle-sidebar">
                    <i class="ti-menu"></i>
                </a>

            </li>

        </ul>
        <ul id="topnav" class="nav navbar-nav hidden-xs">
            <!--<li>-->
            <!--<a href="${base!}/sysadmin/home" data-pjax>-->
            <!--<i class="ti-home"></i>-->
            <!--<span>首页</span>-->
            <!--</a>-->
            <!--</li>-->
            <!--#
            var secondMenus=@shiro.getPrincipalProperty('secondMenus');
            for(firstMenu in @shiro.getPrincipalProperty('firstMenus')){

            #-->
            <li class="dropdown">

                <!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){#-->
                <a href="javascript:;" data-toggle="dropdown">
                    <!--# if(has(firstMenu.icon)){ #-->
                    <i class="${firstMenu.icon}"></i>
                    <!--# } #-->
                    <span>
                        <!--#if(lang=="zh-CN"){#-->${firstMenu.name}<!--#}else{#-->${firstMenu.aliasName}
                        <!--#}#--></span>
                    <b class="caret"></b
                    >
                </a>
                <!--#}else{#-->
                <a href="<!--# if(!isEmpty(firstMenu.href)){ #--><!--#if(@string.startWith(firstMenu.href,'/')){#-->${base}${firstMenu.href!}<!--#}else{#-->${firstMenu.href!}<!--#}#--> <!--# }else{ #-->javascript:;<!--# } #-->"
                <!--#if(@string.startWith(firstMenu.target,'_')){#-->target="${firstMenu.target!}"<!--#}else{#-->
                ${firstMenu.target!}<!--#}#-->>
                <span>
                        <!--#if(lang=="zh-CN"){#-->${firstMenu.name}<!--#}else{#-->${firstMenu.aliasName}
                    <!--#}#--></span></a>
                <!--#}#-->
                <!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){#-->
                <ul class="dropdown-menu topnav">
                    <!--# for(secondMenu in @secondMenus.get(firstMenu.path)){ #-->
                    <li class="dropdown">
                        <a href="<!--# if(!isEmpty(secondMenu.href)){ #--><!--#if(@string.startWith(secondMenu.href,'/')){#-->${base}${secondMenu.href!}<!--#}else{#-->${secondMenu.href!}<!--#}#--> <!--# }else{ #-->javascript:;<!--# } #-->"  <!--#if(@string.startWith(secondMenu.target,'_')){#-->target="${secondMenu.target!}"
                        <!--#}else{#-->${secondMenu.target!}<!--#}#-->>
                        <!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #--><i class="toggle-accordion"></i>
                        <!--#}#-->
                        <span><!--#if(lang=="zh-CN"){#-->${secondMenu.name}<!--#}else{#-->${secondMenu.aliasName}
                            <!--#}#--></span>
                        </a>
                        <!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
                        <ul class="sub-menu">
                            <!--# for(thMenu in @secondMenus.get(secondMenu.path)){ #-->
                            <li class="clearfix">
                                <a <!--# if(!isEmpty(thMenu.href)){ #-->href="<!--#if(@string.startWith(thMenu.href,'/')){#-->${base}${thMenu.href!}<!--#}else{#-->${thMenu.href!}<!--#}#-->" <!--# }else{ #-->href="javascript:;"<!--# } #--> <!--#if(@string.startWith(thMenu.target,'_')){#-->target="${thMenu.target!}"
                                <!--#}else{#-->${thMenu.target!}<!--#}#-->><span><!--#if(lang=="zh-CN"){#-->${thMenu.name}<!--#}else{#-->${thMenu.aliasName}<!--#}#--></span></a>
                            </li><!--# }#-->
                        </ul><!--#}#-->
                    </li><!--# } #-->
                </ul><!--# } #-->
            </li><!--# }#-->
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <!--通知位置-->
            <li class="language-dropdown dropdown hidden-xs">
                <a href="javascript:;" data-toggle="dropdown" id="language">
                    <!--#if(lang==null||lang=="zh-CN"){#-->
                    <img src="${base!}/assets/platform/images/flags/cn.png" class="flag">
                    <!--#}else{#-->
                    <img src="${base!}/assets/platform/images/flags/us.png" class="flag">
                    <!--#}#-->
                    <ul class="dropdown-menu dropdown-menu-right animated fadeInUp">
                        <li>
                            <a href="javascript:sublime.changeLang('en_US');">
                                <img src="${base!}/assets/platform/images/flags/us.png" class="flag">
                                <span class="language">English</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:sublime.changeLang('zh_CN');">
                                <img src="${base!}/assets/platform/images/flags/cn.png" class="flag">
                                <span class="language">中文</span>
                            </a>
                        </li>
                    </ul>
            </li>
            <li class="notifications dropdown" data-toggle="tooltip" data-placement="bottom" title="${msg['sys.home.notify.top']}">
                <a href="javascript:;" onclick="sublime.notify();" data-toggle="dropdown" >
                    <i class="ti-bell"></i>
                    <script type="text/javascript" src="${base!}/platform/sys/notify/count"></script>
                </a>
                <div class="dropdown-menu animated">
                    <div class="panel no-m">
                        <div class="panel-heading text-muted"><b>${msg['sys.home.notify.top']}</b>
                        </div>
                        <div class="panel content no-m" style="max-height:350px">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <center><img src="${base!}/assets/platform/images/loading2.gif"/></center>
                                </li>
                            </ul>
                        </div>
                        <div class="panel-footer">
                            <a href="${base!}/platform/sys/notify">查看全部通知</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="off-right">

            <a href="javascript:;" data-toggle="dropdown">
                <img src="${base!}/assets/platform/images/avatar.jpg" class="header-avatar img-circle" alt="${@shiro.getPrincipalProperty('username')}" title="${@shiro.getPrincipalProperty('username')}">
                    <span class="hidden-xs ml10">${@shiro.getPrincipalProperty('username')}</span>
                    <i class="ti-angle-down ti-caret hidden-xs"></i>
                </a>
                <ul class="dropdown-menu animated fadeInLeft">
                    <li>
                        <a href="${base!}/platform/sys/user/custom" data-toggle="modal"
                           data-target="#homeDetail">
                            <i class="ti-heart"></i><span class="ml10">${msg['sys.home.custom.menu']}</span></a>
                    </li>
                    <li class="dropdown hidden-xs">
                        <a href="javascript:;" class="pg-toggle">
                            <i class="ti-palette"></i><span class="ml10">${msg['sys.home.custom.layout']}</span>
                        </a>
                    </li>
                    <li class="dropdown hidden-xs">
                        <a href="${base!}/platform/sys/user/mode" data-toggle="modal"
                           data-target="#homeDetail">
                            <i class="fa fa-rotate-left"></i><span class="ml10">${msg['sys.home.custom.mode']}</span>
                        </a>
                    </li>
                    <li>
                        <a href="${base!}/platform/sys/user/pass" data-toggle="modal"
                           data-target="#homeDetail"><i class="ti-key"></i><span class="ml10">${msg['sys.home.custom.password']}</span></a>
                    </li>
                </ul>
            </li>
            <li class="off-right">
                <a href="${base!}/platform/login/logout">
                    <i class="ti-power-off"></i>
                </a>
            </li>
        </ul>
    </header>
    <section class="layout">

        <aside class="sidebar offscreen-left">

            <nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true"
                 data-wheel-step="10">
                <!--<p class="nav-title">MENU</p>-->
                <ul class="nav">
                    <li class="open">
                        <a href="javascript:;">
                            <!--#if(!isEmpty(@shiro.getPrincipalProperty('customMenus'))){#-->
                            <i class="toggle-accordion"></i>
                            <!--#}#-->
                            <i class="ti-heart"></i>
                            <span>${msg['sys.user.custom.menu']}</span>
                        </a>
                        <!--#if(!isEmpty(@shiro.getPrincipalProperty('customMenus'))){#-->
                        <ul class="sub-menu">
                            <!--#for(o in @shiro.getPrincipalProperty('customMenus')){#-->

                            <li>
                                <a <!--#if(!isEmpty(o.href)){#-->href="${base}${o.href}"
                                <!--#if('data-pjax'==o.target){#-->data-pjax<!--#}}else{ #-->href="javascript:;"
                                <!--#}#-->>
                                <span><!--#if(lang=="zh-CN"){#-->${o.name}<!--#}else{#-->${o.aliasName}<!--#}#--></span>
                                </a>
                            </li>

                            <!--#}#-->
                        </ul>
                        <!--#}#-->
                    </li>

                </ul>
                <ul id="leftnav" class="nav">
                </ul>
            </nav>
        </aside>
        <section class="main-content" id="container">
            ${layoutContent}
        </section>
    </section>


</div>
<div id="homeDetail" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>
<!--script-->
<script src="${base!}/assets/platform/vendor/modernizr.js"></script>
<script src="${base!}/assets/platform/scripts/jquery.pjax.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-colorpalette/js/bootstrap-colorpalette.js"></script>

<script src="${base!}/assets/platform/vendor/jquery.form/jquery.form.js"></script>
<script src="${base!}/assets/platform/vendor/sortable/js/sortable.min.js"></script>
<script src="${base!}/assets/platform/vendor/nestable/jquery.nestable.js"></script>
<script src="${base!}/assets/platform/vendor/iCheck/icheck.js"></script>
<script src="${base!}/assets/platform/vendor/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${base!}/assets/platform/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="${base!}/assets/platform/vendor/appear/jquery.appear.js"></script>
<script src="${base!}/assets/platform/vendor/fastclick.js"></script>
<script src="${base!}/assets/platform/vendor/jquery-countTo/jquery.countTo.js"></script>
<script src="${base!}/assets/platform/scripts/toast.js"></script>
<script src="${base!}/assets/platform/vendor/chosen/chosen.jquery.min.js"></script>
<script src="${base!}/assets/platform/vendor/treetable/jquery.treetable.js"></script>
<script src="${base!}/assets/platform/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="${base!}/assets/platform/vendor/datatables/js/dataTables.bootstrap.js"></script>
<script src="${base!}/assets/platform/vendor/jstree/jstree.min.js"></script>
<script src="${base!}/assets/platform/vendor/switchery/switchery.min.js"></script>

<script src="${base!}/assets/platform/vendor/stepy/jquery.stepy.js"></script>
<script src="${base!}/assets/platform/vendor/stepy/jquery.stepy.min.js"></script>
<script src="${base!}/assets/platform/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="${base!}/assets/platform/vendor/iCheck/icheck.min.js"></script>
<script src="${base!}/assets/platform/vendor/chosen/chosen.jquery.min.js"></script>
<script src="${base!}/assets/platform/vendor/uploadifive/jquery.uploadifive.min.js"></script>

<script src="${base!}/assets/platform/vendor/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-datepicker/js/bootstrap-datetimepicker.fr.js"></script>

<script src="${base!}/assets/platform/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.${lang!}.min.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.${lang!}.js"></script>
<script src="${base!}/assets/platform/vendor/sortable/js/sortable.min.js"></script>
<script src="${base!}/assets/platform/vendor/sparkline/jquery.sparkline.min.js"></script>
<script src="${base!}/assets/platform/vendor/x-editable/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="${base!}/assets/platform/vendor/jquery.placeholder.js"></script>
<script src="${base!}/assets/platform/vendor/moment/moment.min.js"></script>
<script src="${base!}/assets/platform/vendor/moment/locale/${lang!}.js"></script>
<script src="${base!}/assets/platform/vendor/parsleyjs/parsley.min.js"></script>
<script src="${base!}/assets/platform/vendor/parsleyjs/locale/${lang!}.js"></script>
<script src="${base!}/assets/platform/scripts/form.js"></script>
<script src="${base!}/assets/platform/scripts/offscreen.js"></script>
<script src="${base!}/assets/platform/scripts/main.js"></script>
<script src="${base!}/assets/platform/scripts/page.js"></script>
<script src="${base!}/assets/platform/scripts/date.js"></script>
<script src="${base!}/assets/common/vendor/layer3/layer.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-tokenfield/bootstrap-tokenfield.min.js"></script>
<script src="${base!}/assets/platform/vendor/bootstrap-star-rating/js/star-rating.js" type="text/javascript" ></script>
<script src="${base!}/assets/common/vendor/city-picker/js/data.86.all.js"  type="text/javascript"></script>
<script src="${base!}/assets/common/vendor/city-picker/js/picker.86.js"  type="text/javascript"></script>
<script src="${base!}/assets/platform/vendor/select2/js/select2.min.js" type="text/javascript"></script>
<script src="${base!}/assets/platform/vendor/select2/js/i18n/${lang!'zh-CN'}.js" type="text/javascript"></script>
<script src="${base!}/assets/platform/vendor/template.js" type="text/javascript"></script>

<script type="text/javascript">
    function bindLeft() {
        $('.main-navigation a[data-pjax]').on('click', function () {
            $('.main-navigation a[data-pjax]').each(function () {
                $(this).parent().removeClass('active');
            });
            $(this).parent().addClass('active');
        });
    }
    $(document).ready(function () {
        if ($.support.pjax) {
            <!--#if(@shiro.getPrincipalProperty('loginPjax')){#-->
            $(document).pjax('a[data-pjax]', '#container', {
                maxCacheLength: 0,
                push: false,
                replace: true,
                fragment: '#container',
                timeout: 8000
            });
            <!--#}#-->
            bindLeft();
            $('#topnav a[data-pjax]').on('click', function () {
                $.get("${base!}/platform/home/left?url=" + $(this).attr("href"), function (data) {
                    $("#leftnav").html(data);
                    bindLeft();
                }, "html");
            });
            $.get("${base!}/platform/home/path?url=" + window.location.href, function (data) {
                $("#leftnav").html(data);
                bindLeft();
            }, "html");
            <!--#if(@shiro.getPrincipalProperty('loginPjax')){#-->
            $(document).on('pjax:send', function () { //pjax链接点击后显示加载动画；
                $(".gallery-loader").fadeIn();
            });
            $(document).on('pjax:complete', function () { //pjax链接加载完成后隐藏加载动画；
                setTimeout(function () {
                    $(".gallery-loader").fadeOut()
                }, 250);
            });
            <!--#}#-->
        }

        try {
            $(".gallery-loader").fadeOut();
        } catch (e) {
        }
        $('#homeDetail').on('hidden.bs.modal', function () {
            $(this).removeData("bs.modal");
        });
        $(".toggle-sidebar").click(function () {
            $(".o_img").toggleClass("o_hide");
        });
    });

</script>
<!--script-->
</body>
</html>